<template>
  <div class="condition-wrapper">
    <div class="content" :class="{'height-auto': isCollapse}">
      <tag-group v-for="(value,key,index) in conditionData" :key="key" v-model="conditions[index]" :data="value" :title="key" />
    </div>
    <div class="more" @click="isCollapse = !isCollapse">{{ isCollapse ? '收起' : '展示全部' }} <i class="el-icon-arrow-down collapse-icon" :class="{'rotate-icon': isCollapse}" /></div>
  </div>
</template>
<script>
import TagGroup from './TagGroup'
import condition from '@/assets/json/condition'
export default {
  name: 'SearchCondition',
  components: {
    TagGroup
  },
  data() {
    return {
      isCollapse: false,
      conditionData: condition,
      conditions: [[], [], [], []]
    }
  }
}
</script>
<style lang="scss" scoped>
.height-auto {
    max-height: 600px !important;
}
.rotate-icon {
    transform: rotate(-180deg)
}
.condition-wrapper {
  min-height: 60px;
  box-shadow: $shadow;
  .content {
      max-height: 100px;
      transition: all .4s ease;
      overflow-y: hidden;
      overflow-x: hidden;
  }
  .more {
      width: 100%;
      text-align: center;
      color: $grey;
      padding: 6px 0;
  }
  .collapse-icon {
      transition: all .4s ease;
  }
}
</style>

